<%--
  Created by IntelliJ IDEA.
  User: SXT
  Date: 2020/6/29
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单管理页面</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--引入easyui主题的css样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--引入easyui中图标集的css样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--引入jq中js文件  注意：先引入jq中js在引入easyui中js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--引入easyui中核心js文件--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

          $(function () {
              $('#dg').datagrid({
                  url:'menu/findAllMenu',
                  pagination:true,//设置分页栏展示
                  rownumbers:true,//设置行号显示
                  pageSize:5,//设置size的初始大小
                  pageList:[5,10,15,20],// 设置每一页显示条数列表
                  toolbar:"#tb",
                  columns:[[
                      {field:'mid',title:'菜单ID',width:150,align:'center'},
                      {field:'mname',title:'菜单名称',width:150,align:'center'},
                      {field:'url',title:'菜单URL',width:150,align:'center'},
                      {field:'mdesc',title:'菜单描述',width:150,align:'center'}
                  ]]
              });
          })

          var url="";

         //添加菜单对话框实现
        function newMenus() {

              //打开当前对话框
              $("#dlg").dialog("open").dialog("setTitle","New Menus");
              //清空之前表单数据
              $("#fm").form("clear");

            //给当前pid赋予初始值
            $("#pid").val(0);
            //给提示赋予初始值
            $("#pid_name").text("默认添加一级菜单");

            url="menu/saveMenu";
        }
        
        //选择父节点对话框展示
        function checkPid() {
            //打开父节点选择的对话框
            $("#pid_dlg").dialog("open").dialog("setTitle","check Parent");

        }

        //选择父节点的事件的增加
        $(function () {
            $('#tt').tree({
                onDblClick: function(node){
                     //获得当前节点的id
                      $("#pid").val(node.id);
                     //把选中的节点名称赋值给span
                     $("#pid_name").text(node.text);
                     //关闭当前对话框
                     $("#pid_dlg").dialog("close");
                }
            });
        })
        
        //提交当前表单实现
        function saveMenu() {

              $.post(url,$("#fm").serialize(),function (result) {
                    if(result>0){
                        //关闭当前对话框
                        $("#dlg").dialog("close");
                        //重新加载数据网格
                        $("#dg").datagrid("reload");
                        //重新加载树形展示
                        $("#tt").tree("reload");
                    }
              })
        }
        
        //修改菜单对话框
        function editMenus() {
              var row=$("#dg").datagrid("getSelected");

              console.log(row);
              if(row){
                  //打开对话框
                  $("#dlg").dialog("open").dialog("setTitle","Edit Menu");
                  //进行数据回显
                  $("#fm").form("load",row);

                  $("#pid_name").text("默认当前父节点");

                  url="menu/changeMenu?mid="+row.mid;
              }
            
        }
        
        //删除菜单实现
        function removeMenus() {

            var row=$("#dg").datagrid("getSelected");

            if(row){
                 $.messager.confirm("提示","是否删除该数据",function (f) {
                        if(f){

                              $.post("menu/removeMenu",{mid:row.mid},function (result) {
                                      if(result>0){
                                           //重新加载数据网格
                                           $("#dg").datagrid("reload");
                                      }else  if(result==-1){
                                          $.messager.alert("提示","当前节点下有子菜单，删除失败","info");
                                      }else {
                                          $.messager.alert("提示","删除失败","error");
                                      }

                              })

                        }

                 })
            }
        }
        
        
    </script>

</head>
<body>

<div style="width: 800px;height: 600px" class="easyui-panel" title="菜单管理">

    <div style="width: 750px;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">

        <table id="dg" style="width: 750px;height: 400px"></table>

        <%--工具栏设置--%>
        <div id="tb">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newMenus()">添加菜单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editMenus()">编辑菜单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeMenus()">删除菜单</a>
        </div>
    </div>


    <%--添加菜单对话框的展示--%>
    <div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <h3>Menu  Information</h3>
            <div style="margin-bottom:10px">
                <input name="mname" class="easyui-textbox" required="true" label="菜单名称:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                父节点选择: <a href="javascript:void(0)" onclick="checkPid()" class="easyui-linkbutton c6" iconCls="icon-reload" style="width:90px">check</a>

                <span id="pid_name">默认添加一级菜单</span>

                <input type="text" name="pid"  id="pid"/>
            </div>

            <div style="margin-bottom:10px">
               是否打开：
                <input class="easyui-radiobutton" name="status" value="1" label="是:">

                <input class="easyui-radiobutton" name="status" value="0" label="否:">
            </div>
            <div style="margin-bottom:10px">
                <input name="url" class="easyui-textbox" required="true" label="菜单地址:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="mdesc" class="easyui-textbox" required="true" label="菜单描述:" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveMenu()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>

    <%--父节点选择的对话框--%>
    <div id="pid_dlg" class="easyui-dialog" style="width:400px;height: 500px" data-options="closed:true,modal:true,border:'thin'">

        <ul id="tt" class="easyui-tree"
            url="menu/findAllMenu2">
        </ul>

    </div>

</body>

</html>
